import React, { Component } from "react";
import { Modal, Button, Form, Input } from "antd";
import { connect } from "dva";

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};

@Form.create()
@connect(({ global }) => {
  return {
    服务器地址: global.服务器地址,
    服务器UDP地址: global.服务器UDP地址,
    服务器接口地址: global.服务器接口地址,
    本地端口: global.本地端口,
    显示服务器配置: global.显示服务器配置
  };
})
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const {
      服务器地址,
      服务器UDP地址,
      服务器接口地址,
      本地端口,
      form,
      显示服务器配置,
      dispatch
    } = this.props;
    const { getFieldDecorator, validateFields } = form;
    return (
      <Modal
        visible={显示服务器配置}
        title="服务器配置"
        closable={false}
        footer={
          <Button
            type="primary"
            onClick={_ => {
              validateFields((err, values) => {
                if (!err) {
                  window.astilectron.sendMessage({
                    name: "服务器配置",
                    payload: values
                  });
                  dispatch({
                    type: "global/save",
                    显示服务器配置: false,
                    是否配置服务器: true,
                    ...values
                  });
                }
              });
            }}
          >
            确定
          </Button>
        }
        maskClosable={false}
      >
        <FormItem {...formItemLayout} label="服务器地址">
          {getFieldDecorator("服务器地址", {
            initialValue: 服务器地址,
            rules: [
              {
                required: true
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem {...formItemLayout} label="服务器UDP地址">
          {getFieldDecorator("服务器UDP地址", {
            initialValue: 服务器UDP地址,
            rules: [
              {
                required: true
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem {...formItemLayout} label="服务器接口地址">
          {getFieldDecorator("服务器接口地址", {
            initialValue: 服务器接口地址,
            rules: [
              {
                required: true
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem {...formItemLayout} label="本地端口">
          {getFieldDecorator("本地端口", {
            initialValue: 本地端口,
            rules: [
              {
                required: true
              }
            ]
          })(<Input type="number" />)}
        </FormItem>
      </Modal>
    );
  }
}

export default App;
